<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="/js/prism.css">
    <link rel="stylesheet" href="/css/app.css">
    <title>基于微信登录的评论程序 - 叫兽</title>
    <link rel="icon" type="image/x-icon" class="js-site-favicon" href="/img/favicon.ico">
  </head>
  <body>

        <div class="container bg-white pb-5 px-5 spx-0">
            
            <h1 class="post-title">基于微信登录的评论程序</h1>




            <h2>Why</h2><h3>我很需要需要一个评论程序</h3><p>起因于用 github 来运营自己的 blog，习惯了使用代码编辑器敲代码，非常喜欢在编辑器中用 markdown语法 来写文字， 很简洁舒服，没有压力，自然而然的感觉。有的人喜欢手写，但我很怕用手写字，用手写文字对于我来说很累很痛苦，这种严重程度到我每次办理银行业务要写自己名字确认，都觉得很不爽。</p><p>在本地编辑器写文字，每次写完一部分，commit一次提交到 github 中进行了版本管理，最后写完了一次 push，发布到 blog 中，既有了版本控制，发布管理也很自然，不需要刻意的进行什么操作。</p><p>github 托管 blog还是有一点点缺点：</p><ol><li>只能托管静态页面，无法运行动态程序<br>意味着无法像其它 blog 支持统计访问的程序，也没有办法支持评论程序。要使用这些功能就必须使用第三方插件</li><li>百度不支持在 github 上的托管网站索引，百度上无法搜索到自己的blog，自己写的文章。<br>对于这个我到是无所谓，因为 blog 就是记录自己的一些想法，同时学习如何写作。所以不在乎是否被百度索引或被别人搜索到。</li></ol><p>对文章进行评论的功能，我还是很需要的，想知道朋友对我的文章的意见建议，评价。</p><p>找了几个都不满足我的需求，所以基于产品经理的职业习惯，自己用业余时间设计一个然后撸出来吧.</p><h2>What</h2><p>我的需求一句话说就是想要一个和微信朋友圈、公众号体验一样的评论程序。</p><ol><li>PC 端用户需要评论的时候，微信扫码获取用户信息，然后就可以评论，评论后自己的头像，名字都是微信的信息</li><li>手机端用户需要评论的时候，直接弹出微信授权，是否允许获取个人信息，授权后就可以进行评论</li><li>授权过一次后，就记住状态，之后在所有使用该评论系统的文章下面都不需要再登录，直接显示了记住的状态，用户直接发表留言或评论即可</li><li>可以像公众号文章一样进行点赞文章，点赞评论，置顶评论</li><li>可以记录访问量</li><li>作者可以控制是否在需要在微信上收到评论的通知，可以在微信上就操作评论的回复</li><li>...</li></ol><p>怎么样，是不是光想一想就很爽</p><p>用户操作的时候很简单，浏览文章的时候还是和原来一样，没有任何区别。当用户看完文章，想评论的时候，如果没有扫码过，点击评论输入框的时候会弹出使用微信扫描二维码，扫码后就可以进行评论了。</p><p>自己的头像，名字，评论内容，就显示给了文章作者。</p><p>算是一种基于微信的熟人的评论体系吧。</p><p>这么做不光爽，而且还有效防止了垃圾广告程序的攻击，而且是全网统一的防攻击。</p><p>目前这还是一个最初的想法，还需要在做的过程逐步迭代。</p><h2>When & Where</h2><p>打算平均每天2h来做这个事情，早上到办公室上班前1h，晚上健身结束后在家1h，这样就有5h了，然后周末在家拿出一天10h，一周就有15h来推进这个事情。(h: hour)</p><h2>Who</h2><p>产品经理：我<br /> 项目经理：我<br /> 后端开发：我<br /> 前端开发：我<br /> 美工设计：我抄袭 + 请教同事改进<br /> 测试：我 + 朋友体验<br /></p><h2>How & How much</h2><p>第一阶段: 30-40h</p><p>快速实现是一个能用的走完整个流程的系统</p><ol><li>评论列表展示</li><li>评论输入框</li><li>点击需要评论弹出微信扫码</li><li>用户扫码后获得用户信息，允许用户进行评论</li><li>用户评论后添加评论到列表</li><li>对评论点赞</li><li>对评论置顶</li></ol><p>第二阶段: 30-40h</p><p>迭代改进+测试</p><p>第三阶段: 30-40h</p><p>开放对外用户的注册使用的平台，相关调用手册说明，相关推广文章编写: </p><h3>总计时间</h3><p>一共需要大概90到120个小时，差不多是11-15个工作日，这次我会尝试记录每一个部分所花费的时间，到最后看实际花费时间和预估时间的差别。</p><p>后续阶段：</p><p>陆陆续续持续改进</p><p>时间记录:<br /></p><h3>第一阶段 (30-40h)</h3><ol><li>11.15 1h (08:00-09:00)  <br>完成系统的简单产品设计，并写下来这篇产品文档</li><li>11.16 1.5h (11:00-0:30)  <br>完成获取微信登录二维码，获取用户微信扫码状态，如果用户未扫码，则持续更新获取，同时提升了获取的速度。性能很好。这么快的弄出来，得益于公司老铁的热心优秀建议，使我少走很多弯路。</li><li>11.17 2h (06:00-08:00)  <br>完成 PC 端二维码登录，改进各种特殊情况下的处理方式，完成服务端各项接口测试，都测试通过，并都能获取到相关数据。</li><li>11.17 2.5h (09:00-11:30)  <br>完成前后端联通，完成评论列表页面，休息一会，一会开始做用户和评论相关数据表，进行存储。</li><li>11.17 0.5 (12:00-13:00)  <br>开始做数据表设计，未完成</li><li>11.18 4h (08:00-12:00)  <br>完成数据表设计，以及数据的维护，开始进行评论数据插入</li><li>11.18 5h (13:30-18:30)  <br>完成 PC 端整个评论流程，用户扫码登录，评论内容，获取的评论列表，客户端记住用户登录状态，以及 token 验证。</li><li>11.18 5h (19:00-23:30)  <br>a 优化数据库结构，减少数据库查询和插入次数。   b 优化数据接口，减少请求次数   c 研究和测试 cookie或localstorage跨域解决方案。（未完成）  </li><li>11.19 1h (07:00-08:00)  <br>优化代码结构，完善相关文档</li><li>11.20 3h (20:00-23:00)  <br>完成多用户设计，用户可以自己注册，后续可以添加自己网站，生成自己的网站appid和appkey，然后就可以部署评论程序到自己的网站</li><li>11.21 1.5h (21:45-23:15)  <br>学习前后端表单处理validation相关的库，以及clean data相关的库</li><li>11.24 2h (07:00-09:00)  <br>检查和解决 突发 bug，数据无法插入了</li><li>11.24 2h (13:30:00-15:30)  <br>完善后台用户操作部分:个人网站添加，编辑，删除，获取和展示评论列表</li><li>11.25 1h (07:00-09:00) <br>完成对评论的点赞(喜欢), 增加管理员完成对评论的删除，增加垃圾评论标记</li><li>11.26 1h (22:00-23:00) <br>思考和查找并发解决方案，比如瞬间1000个人点赞，如何保证点赞数据的正确性</li><li>11.27 3h (12:00-15:00) <br>完成点赞，前端后端，以及取消点赞</li><li>11.28 3.5h (07:00-22:30) <br>完成跨域评论解决方案</li><li>11.30 3.5h (07:00-22:30) <br>完成跨域的相关细节修复，尝试连接云数据库，遇到为题，暂未解决</li><li>12.02 3h (15:00-18:00) <br>部署到服务器，连接本地数据库进行测试</li><li>12.02 2h (22:00-24:00) <br>修复点击赞的 bug，以及更新后台评论列表</li><li>12.04 2h (19:00-21:00) <br>增加手机微信端打开页面进行评论，获取用户授权，然后获得用户头像和姓名</li></ol><h3>第一阶段完成</h3><p>预计用时<code>30-40h</code>, 实际用时：<code>50.5h</code> 超过预期时间<code>10-20</code>小时</p><h3>第二阶段 30-40h</h3><ol><li>12.05 3.5h (20:00-23:30) <br>增加评论回复的功能</li><li>12.06 1.5h (22:00-23:30) <br>完成评论回复的添加和展示</li></ol><p>3. </p>
            <p class="text-left text-muted">2018-12-06 15:26</p>
        </div>
        <div class="container">
            <div class="row mt-4">
                <div class="col-6 text-left"><a href="/p/2018/11/16/js和css刷新缓存不会更新问题解决/">上一篇: js和css刷新缓存不会更新问题解决</a></div>
                <div class="col-6 text-right"><a href="/p/2018/11/8/把自己当做一个企业来经营/">下一篇:把自己当做一个企业来经营</a></div>
            </div>
        </div>

        <button class="btn btn-link m-menu-toggle d-md-none fixed-top collapsed" type="button" data-toggle="collapse" data-target="#m-menu" aria-controls="m-menu" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"></path></svg>
        </button>
        <ul class="nav flex-column collapse fixed-top site-menu d-md-block" id="m-menu">
            <li class="nav-item">
                <a class="nav-link" href="/">首页</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/p/list/">所有文章</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/p/about-me/">关于我</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://github.com/arlicle">Github</a>
          </li>
        </ul>

        
    <div class="container mt-5">
        <h3>留言</h3>
        <div id="commentApp"></div>
    </div>
    <script>
        var AL_configs = {
            "post_id":"/p/2018/11/15/基于微信登录的评论程序/",
            "appid":"847e226e8a46f64045d45312245a68ba1368a564"
        };
        (function() {
            var hm = document.createElement("script");
            hm.src = "https://comment.debugmyself.com/sc.js";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>


        <footer class="footer mt-5 pb-2">
        <div class="container text-center">
          
          <p><span class="text-black-50">Powered by <a href="https://github.com/arlicle/ablog">ablog</a> © 2019 叫兽</span></p>
          <p><span class="text-black-50"><a href="http://www.beian.miit.gov.cn/">滇ICP备10201832号-3</a></span></p>
          
        </div>
        </footer>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
        <script src="/js/prism.js"></script>
        <script>
        $(function () {
            $('[data-toggle="tooltip"]').tooltip();
        })
        </script>
        <script type="text/x-mathjax-config">
        MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}, displayAlign: "left",scale: 180});
        </script>
        <script type="text/javascript" async
        src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_SVG" async>
        </script>
  </body>
</html>